<template>
  <div class="header">
    <div class="m-top">
      <h1 class="logo">
        <a href="#">网易云音乐</a>
      </h1>
      <ul class="m-nav j-tflag">
        <li>
          <span>
            <router-link to="../Home">
              <em>发现音乐</em>
              <sub class="cor"></sub>
            </router-link>
          </span>
        </li>
        <li>
          <span>
            <router-link to="../mymusic">
              <em>我的音乐</em>
              <sub class="cor"></sub>
            </router-link>
          </span>
        </li>
        <li>
          <span>
            <router-link to="../friend">
              <em>关注</em>
              <sub class="cor"></sub>
            </router-link>
          </span>
        </li>
        <li>
          <span>
            <router-link to="../shop">
              <em>商城</em>
              <sub class="cor"></sub>
            </router-link>
          </span>
        </li>
        <li>
          <span>
            <router-link to="../artist">
              <em>音乐人</em>
              <sub class="cor"></sub>
            </router-link>
          </span>
        </li>
        <li>
          <span>
            <router-link to="../download">
              <em>下载客户端</em>
              <sub class="cor"></sub>
            </router-link>
            <sub class="hot"></sub>
          </span>
        </li>
      </ul>
      <div class="m-login">
        <a href="#/login">登录</a>
      </div>
      <a href="#/creater" class="m-creater">创作者中心</a>
      <div class="m-search">
        <div class="srhbg">
          <span class="srchsp">
            <input type="text" name="srch" id="srch" ref="srch" @input="srch" @focus="startSearch" class="srchipt"
              @blur="nsearch" v-model="searchVal" />
            <label for="srch" class="srchlabel" ref="srchlb" @click="search">音乐/视频/电台/用户</label>
          </span>
        </div>
        <div class="srchlist" v-if="srhSongLi.length != 0">
          <div class="srch">
            <div class="item">
              <h3 class="typ">
                <i class="icon icon-1"></i>
                <em>单曲</em>
              </h3>
              <ul>
                <li v-for="item in srhSongLi" :key="item.id">
                  <a :href="`http://localhost:8080/#/song?id=${item.id}`" class="overel">
                    <span>{{searchVal}}</span>
                    -{{item.ar[0].name}}
                  </a>
                </li>
              </ul>
            </div>
            <div class="item">
              <h3 class="typ">
                <i class="icon icon-2"></i>
                <em>歌手</em>
              </h3>
              <ul>
                <li v-for="item in srhSonger" :key="item.id">
                  <a :href="`http://localhost:8080/#/songer?id=${item.id}`" class="overel">
                    <span>{{searchVal}}</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="item">
              <h3 class="typ">
                <i class="icon icon-3"></i>
                <em>歌单</em>
              </h3>
              <ul>
                <li v-for="item in pllist" :key="item.id">
                  <a :href="`http://localhost:8080/#/playList?id=${item.id}`" class="overel">
                    {{item.name}}
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <router-view></router-view>
  </div>
  <audio :src="curMusic ? `https://music.163.com/song/media/outer/url?id=${curMusic.id}.mp3` :''" controls="controls"
    loop="loop" id="audio" style="display: none" @ended="nextMu">
  </audio>
  <div class="btm-bar">
    <div :class="['playbar',show_bottom_controls ? 'playbar-lock' : 'noplaybar-lock']">
      <div class="updn">
        <div class="left playm">
          <a href="javascript:;" class="clock" @click='changeBottomControl'></a>
        </div>
        <div class="right playm"></div>
      </div>
      <div class="bg"></div>
      <!-- 用于展开进度条 -->
      <div class="hand"></div>
      <div class="list" v-show="showList">
        <div class="listhd">
          <div class="listhdc">
            <h4>播放列表({{songList ? songList.length : 0}})</h4>
            <a href="javascript:;" class="clear">清除全部</a>
            <p class="mutitle overel">{{curMusic ? curMusic.name : ''}}</p>
            <a href="javascript:;" class="close" @click="this.showList = false"></a>
          </div>
        </div>
        <div class="listbd">
          <img class="listbdbg" :src="curMusic ? curMusic.al.picUrl : ''">
          <div class="msk"></div>
          <div class="listdc">
            <ul v-if="songList.length != 0">
              <li :class="['pllist',this.curMusic.id == item.id ? 'curPl':'']" v-for="item in songList" :key="item.id"
                @click="switchMu(item.id)">
                <a href="javascript:;" class="col col-1"></a>
                <div class="col col-2">{{item.name}}</div>
                <div class="col col-3 overel">{{authorName(item.ar)}}</div>
                <div class="col col-4">{{formatTime(item.dt)}}</div>
                <i class="col col-5" @click="deleteMu(item.id)"></i>
              </li>
            </ul>
          </div>
          <div class="list-lyric">
            <p :class="this.cur_time == i ? 'curLy' : ''" v-for="(item, i) in $store.state.lyricTmpObj" :key="i">
              {{item}}</p>
          </div>
        </div>
      </div>
      <div class="wrap" style="margin-left: -490px" id="wrap">
        <div class="btns">
          <a href="javascript:;" class="prev" @click.prevent="prevMu"></a>
          <a href="javascript:;" :class="{ stop: true, pas: startOrStop }" id="startStop" @click="startStop"></a>
          <a href="javascript:;" @click="nextMu" class="next"></a>
        </div>
        <div class="head">
          <img
            :src="curMusic ? (curMusic.al.picUrl + '?param=34y34'):  'https://s4.music.126.net/style/web2/img/default/default_album.jpg'" />
          <a :href="curMusic ? `http://localhost:8080/#/song?id=${curMusic.id}` : 'javascript:;'"></a>
        </div>
        <div class="progressbar" id="progressbar">
          <div class="words">
            <a
              :href="curMusic ? `http://localhost:8080/#/song?id=${curMusic.id}` : 'javascript:;'">{{curMusic ?curMusic.name : ''}}</a>
          </div>
          <div class="mpbar">
            <div class="barbg" @click.self="movesp">
              <div class="rdy" :style="{ width: buffer_left + '%' }"></div>
              <div class="cur" @click.self="movesp" id="cur" :style="{ width: spleft + '%' }">
                <span class="btn" id="sp" @mousedown.self="drag">
                  <em></em>
                </span>
              </div>
            </div>
            <span class="time">
              <em class="curtime">{{ show_cur_time }}</em>
              <em class="totaltime"> / {{ music_time }}</em>
            </span>
          </div>
        </div>
        <div class="oper">
          <a href="javascript:;" class="pip" title="画中画"></a>
          <a href="javascript:;" class="collection" title="收藏"></a>
          <a href="javascript:;" class="share" title="分享"></a>
        </div>
        <div class="ctrl">
          <div class="mol" v-show="volumnHidden" id="mol">
            <div class="barbg"></div>
            <div class="vbg" id="vbg" @click.self="controlVolume">
              <span class="curr" @click.stop="controlVolume" style="height: 93px" id="volumebg"></span>
              <span class="btn" style="top: 0" id="volumeBtn" @mousedown.stop="dragVol"></span>
            </div>
          </div>
          <a href="javascript:;" class="volume" @click.stop="volumnHidden = !volumnHidden"></a>
          <a href="javascript:;" class="mode"></a>
          <div class="addition">
            <div class="tip" style="display: none">已添加到播放列表</div>
            <a href="javascript:;" class="icn-list" @click="this.showList = !this.showList">{{songList.length}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      searchVal: "",
      volumnHidden: false, // 音量显示
      startOrStop: false, // 开始和关闭音乐
      spleft: 0, // 音月播放进度
      buffer_left: 0, // 缓冲进度
      music_time: "00:00", // 音乐总时长
      cur_time: 0, // 当前播放的时长
      show_cur_time: "00:00", // 当前播放的时长显示
      show_music_time: "", // 音乐播放定时器,
      show_bottom_controls: true,   // 是否显示底层选项
      canChecked: true,
      showList: false,
      lyricList: [],
      srhSongLi: [],
      srhSonger: [],
      pllist: [],
      srchTimer: null
    };
  },
  methods: {
    ...mapMutations(['deleteMusic', 'prevMusic', 'nextMusic', 'switchMusic']),
    ...mapActions(['getlyric']),
    search () {
      this.$refs.srchlb.style.display = 'none'
    },
    nsearch () {
      if (this.searchVal) {
        this.$refs.srchlb.style.display = 'none'
      } else {
        this.$refs.srchlb.style.display = 'block'
      }
    },
    async startSearch () {
      if (this.searchVal) {
        const { data: srh } = await this.$http.get('cloudsearch', {
          params: {
            keywords: this.searchVal,
            limit: 4,
            type: 1
          }
        })
        if (srh.code == 200) {
          this.srhSongLi = srh.result.songs
        }
        const { data: songer } = await this.$http.get('cloudsearch', {
          params: {
            keywords: this.searchVal,
            limit: 1,
            type: 100
          }
        })
        if (songer.code == 200) {
          this.srhSonger = songer.result.artists
        }
        const { data: pl } = await this.$http.get('cloudsearch', {
          params: {
            keywords: this.searchVal,
            limit: 2,
            type: 1000
          }
        })
        if (songer.code == 200) {
          this.pllist = pl.result.playlists
        }
      } else {
        this.srhSongLi = []
        this.srhSonger = []
        this.pllist = []
        this.srchTimer = null
      }
    },
    srch () {
      if (this.srchTimer) {
        clearTimeout(this.srchTimer)
      }
      this.srchTimer = setTimeout(() => {
        this.startSearch()
      }, 500)
    },
    changeBottomControl () {
      this.show_bottom_controls = !this.show_bottom_controls
    },
    deleteMu (id) {
      if (id == this.curMusic.id) {
        this.deleteMusic(id)
        this.nextMu()
      } else {
        this.deleteMusic(id)
      }
    },
    prevMu () {
      clearInterval(this.show_music_time);
      let audio = document.querySelector("audio");
      audio.pause()
      this.prevMusic()
      this.getlyric(this.curMusic.id)
      this.cur_time = 0
      audio.currentTime = 0
      this.show_cur_time = '00:00'
      this.startOrStop = true;
      this.$nextTick(() => {
        audio.play()
        this.music_time = this.music_time_format(this.curMusic.dt / 1000);
        // 开启定时器播放音乐
        this.show_music_time = setInterval(this.show_music, 1000);
      })
    },
    nextMu () {
      clearInterval(this.show_music_time);
      let audio = document.querySelector("audio");
      audio.pause()
      this.nextMusic()
      this.getlyric(this.curMusic.id)
      this.cur_time = 0
      audio.currentTime = 0
      this.show_cur_time = '00:00'
      this.startOrStop = true;
      this.$nextTick(() => {
        audio.play()
        this.music_time = this.music_time_format(this.curMusic.dt / 1000);
        // 开启定时器播放音乐
        this.show_music_time = setInterval(this.show_music, 1000);
      })
    },
    startStop () {
      this.startOrStop = !this.startOrStop;
      if (this.startOrStop) {
        document.querySelector("audio").play();
        var time = document.querySelector("audio").duration;
        this.music_time = this.music_time_format(time);
        // 开启定时器播放音乐
        this.show_music_time = setInterval(this.show_music, 1000);
      } else {
        document.querySelector("audio").pause();
        clearInterval(this.show_music_time);
      }
    },
    // 拖动音乐播放进度
    movesp (e) {
      var pgbar = document.getElementById("progressbar");
      var wrap = document.getElementById("wrap");
      this.spleft =
        ((e.clientX - pgbar.offsetLeft - wrap.offsetLeft) / 466) * 100;
      if (this.spleft > 100) {
        this.spleft = 100;
      }
      var music = document.getElementById("audio");
      music.currentTime = ((this.spleft * music.duration) / 100).toFixed(2);
      this.cur_time = music.currentTime;
      this.show_music();
    },
    // 当前播放时长
    show_music () {
      var time = document.querySelector("audio").duration;
      this.cur_time++;
      this.spleft = (this.cur_time / time) * 100;
      if (this.spleft >= 100) {
        // 表示音乐播放结束
        document.querySelector("audio").pause();
        clearInterval(this.show_music_time);
        this.startOrStop = !this.startOrStop;
      }
      this.show_cur_time = this.music_time_format(this.cur_time);
    },
    // 音乐播放时间格式化
    music_time_format (val) {
      var cur_minute = Math.floor((val / 60)).toFixed(0);
      if (cur_minute < 10) {
        cur_minute = "0" + cur_minute;
      }
      var cur_seconds = (val % 60).toFixed(0);
      if (cur_seconds < 10) {
        cur_seconds = "0" + cur_seconds;
      }
      if (cur_seconds > 59) {
        cur_minute = parseInt(cur_minute) + 1
        if (cur_minute < 10) {
          cur_minute = "0" + cur_minute;
        }
        cur_seconds = "00";
      }
      return cur_minute + ":" + cur_seconds;
    },
    // 控制音乐播放音量大小
    controlVolume (e) {
      let h = e.offsetY - 8;
      if (e.target.id == "volumebg") {
        h = e.offsetY + parseInt(document.querySelector('#volumeBtn').style.top.replace('px', '')) * 93 / 81 + 4
        if (h > 93) {
          h = 93;
        }
        document.getElementById("volumebg").style.height = 93 - h + "px";
        document.querySelector("#volumeBtn").style.top = (h * 81) / 93 + "px";
        document.getElementById("audio").volume = 1 - (h / 93).toFixed(2);
      }
      if (e.target.id == "vbg") {
        if (h < 0) {
          h = 0;
        }
        if (h > 93) {
          h = 93;
        }
        document.getElementById("volumebg").style.height = 93 - h + "px";
        document.querySelector("#volumeBtn").style.top = (h * 81) / 93 + "px";
        document.getElementById("audio").volume = 1 - (h / 93);
      }
    },
    // 播放音乐进度条拖拽
    drag () {
      let spBtn = document.getElementById("cur");
      let dragFlag = false;
      let pgbar = document.getElementById("progressbar");
      let wrap = document.getElementById("wrap");
      if (this.canChecked) {
        this.canChecked = false
        spBtn.onmousedown = function () {
          dragFlag = true;
        };
        spBtn.onmousemove = function (e) {
          if (dragFlag) {
            e = e || window.event;
            let spleft =
              ((e.clientX - pgbar.offsetLeft - wrap.offsetLeft) / 466) * 100;
            spBtn.style.width = spleft + "%";
            if (spBtn.style.width > 100) {
              spBtn.style.width = 100 + "%";
            }
            var music = document.getElementById("audio");
            music.currentTime = ((spleft * music.duration) / 100).toFixed(2);
            this.cur_time = music.currentTime;
          }
        };
        spBtn.onmouseup = function () {
          this.canChecked = true;
          dragFlag = false;
        };
      }
    },
    // 音量拖动条
    dragVol (e) {
      let btn = document.querySelector('.ctrl .btn');
      let bg = document.querySelector('.curr');
      let audio = document.querySelector('#audio');
      let pagY = 0    // 鼠标点击时纵向位置
      let h = parseInt(btn.style.top.replace('px', '')) * 93 / 81;
      if (this.canChecked) {
        this.canChecked = false
        btn.addEventListener('mouseleave', stop)
        // 左鼠标点击
        if (e.button == 0) {
          pagY = e.clientY
          btn.addEventListener('mousemove', move);
          btn.addEventListener('mouseup', stop);
        }
      }
      function move (el) {
        let tp = el.clientY - pagY;
        if (h != 0) {
          tp = tp + h;
        }
        if (tp <= 1) {
          btn.style.top = '0px';
          bg.style.height = '93px';
          audio.volume = 1;
          return
        }
        if (tp >= 90) {
          btn.style.top = '81px';
          bg.style.height = '0px';
          audio.volume = 0;
          return
        }
        btn.style.top = tp * 81 / 93 + 'px';
        bg.style.height = 93 - tp + 'px';
        audio.volume = tp / 93;
      }
      function stop () {
        this.canChecked = true
        btn.removeEventListener('mousemove', move, false)
        btn.removeEventListener('mouseup', stop, false)
      }

    },
    formatTime (val) {
      let m = Math.floor(val / 1000 / 60)
      let s = Math.floor(val / 1000 % 60)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    authorName (li) {
      let n = li.length;
      let name = ''
      li.forEach((element, i) => {
        if (i == n - 1) {
          name = name + element.name
        } else {
          name = name + element.name + '/'
        }
      });
      return name
    },
    switchMu (id) {
      this.switchMusic(id)
      this.getlyric(this.curMusic.id)
      clearInterval(this.show_music_time);
      let audio = document.querySelector("audio");
      audio.pause()
      this.cur_time = 0
      audio.currentTime = 0
      this.show_cur_time = '00:00'
      this.startOrStop = true;
      this.$nextTick(() => {
        audio.play()
        this.music_time = this.music_time_format(this.curMusic.dt / 1000);
        // 开启定时器播放音乐
        this.show_music_time = setInterval(this.show_music, 1000);
      })
    }
  },
  computed: {
    ...mapGetters(['curMusic']),
    ...mapState(['songList']),
  },
  mounted () {
    this.getlyric(this.curMusic.id)
    this.lyricList = this.$store.state.lyricTmpObj
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.header {
  position: relative;
  z-index: 999;
  width: 100%;
  height: 70px;
  background: #242424;
  border-bottom: 1px solid #000;
}
.m-top {
  width: 1100px;
  margin: 0 auto;
}
.m-top::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.m-top .logo {
  float: left;
  width: 176px;
  height: 69px;
  background: url("./assets/topbar.png") no-repeat 0 9999px;
  background-position: 0 0;
}
.logo a {
  display: inline-block;
  width: 157px;
  height: 69px;
  line-height: 69px;
  padding-right: 20px;
  color: #fff;
  text-indent: -9999px;
}
.m-top .hot {
  display: block;
  position: absolute;
  top: 21px;
  left: 100px;
  width: 28px;
  height: 19px;
  background-position: -190px 0;
}
.m-login {
  float: right;
  height: 45px;
  margin: 19px 0 0 20px;
  padding: 0 22px 0 0;
}
.m-login a {
  display: block;
  margin-top: 7px;
  color: #787878;
}
.m-creater {
  float: right;
  height: 32px;
  width: 90px;
  line-height: 32px;
  text-align: center;
  margin: 19px 0 0 12px;
  color: #ccc;
  border: 1px solid #4f4f4f;
  border-radius: 16px;
}
.m-creater:hover {
  border-color: #fff;
}
.m-search {
  position: relative;
  float: right;
  height: 32px;
  width: 158px;
}
.m-search .srhbg {
  display: block;
  width: 158px;
  margin-top: 19px;
  height: 32px;
  background-position: 0 -99px;
  background-color: #fff;
  border-radius: 16px;
}
.m-search .srhbg .srchsp {
  position: relative;
  display: block;
  margin: 8px 0 0 30px;
  top: 8px;
}
.srchsp input {
  width: 95%;
  margin: 0;
  padding: 0;
  // 设置input边框透明
  background: transparent;
  border: 0;
  opacity: 1;
  line-height: 16px;
  color: #000;
}
.srchsp label {
  display: block;
  position: absolute;
  width: 92%;
  top: 0;
  left: 0;
  color: #9b9b9b;
  cursor: text;
}
.srchlist {
  position: absolute;
  left: 0;
  top: 59px;
  clear: both;
  box-sizing: border-box;
  width: 240px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 4px 7px #555;
  ul {
    margin-left: 62px;
    padding: 6px 0 5px;
    box-sizing: border-box;
    border-left: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    li {
      width: 100%;
      float: left;
      a {
        display: block;
        width: 100%;
        text-indent: 12px;
        line-height: 24px;
        &:hover {
          text-decoration: underline;
        }
        span {
          color: #0c73c2;
        }
      }
      &:hover {
        background-color: #e2e2e2;
      }
    }
    &::after {
      display: block;
      height: 0;
      clear: both;
      content: "";
    }
  }
}
.item::after {
  clear: both;
  content: "";
}
.typ {
  float: left;
  padding: 10px 0 0 10px;
  width: 52px;
  margin-right: -100px;
  font-weight: normal;
  line-height: 17px;
  .icon {
    display: inline-block;
    width: 14px;
    height: 15px;
    margin: 2px 4px 0 0;
  }
  .icon-1 {
    background-position: -35px -300px;
  }
  .icon-2 {
    background-position: -50px -300px;
  }
  .icon-3 {
    background-position: -50px -320px;
  }
}
.btm-bar .list {
  position: absolute;
  width: 986px;
  height: 301px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  bottom: 47px;
  border-radius: 8px;
}
.listhd,
.listbd {
  background: url("./assets/playlist_bg.png") no-repeat 0 9999px;
}
.listhd {
  height: 41px;
  padding: 0 5px;
  background-position: 0 0;
}
.listhdc {
  height: 40px;
  position: relative;
  h4 {
    position: absolute;
    left: 25px;
    top: 0;
    height: 100%;
    line-height: 40px;
    font-size: 14px;
    color: #e2e2e2;
  }
  .clear {
    position: absolute;
    left: 490px;
    top: 12px;
    height: 15px;
    color: #cccccc;
    &:hover {
      text-decoration: underline;
    }
  }
  .mutitle {
    position: absolute;
    color: #fff;
    left: 595px;
    top: 0;
    line-height: 40px;
    height: 40px;
    width: 346px;
    text-align: center;
    font-size: 14px;
  }
  .close {
    position: absolute;
    right: 8px;
    top: 6px;
    width: 30px;
    height: 30px;
    background: url("./assets/playlist.png") no-repeat -195px 9px;
    &:hover {
      background-position: -195px -21px;
    }
  }
}
.listbd {
  position: absolute;
  left: 0;
  top: 41px;
  height: 260px;
  width: 100%;
  overflow: hidden;
  background-repeat: repeat-y;
  background-position: -1014px 0;
  .msk {
    width: 558px;
    height: 260px;
    background: none;
    background-color: #121212;
    opacity: 0.5;
  }
}
.listbdbg {
  position: absolute;
  left: 2px;
  width: 980px;
  height: auto;
  top: -360px;
  opacity: 0.2;
}
.listdc {
  position: absolute;
  height: 260px;
  width: 557px;
  top: 2px;
  left: 0;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-track-piece {
    border-radius: 4px;
    background-color: #000;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #4a4949;
    border-radius: 4px;
  }
  ul {
    display: flex;
    flex-direction: column;
    color: #ccc;
    cursor: pointer;
    .pllist {
      display: flex;
      align-items: center;
      height: 28px;
      background-color: rgba(0, 0, 0, 0.3);
      width: 100%;
      &:hover {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
    .curPl {
      background-color: rgba(0, 0, 0, 0.5);
    }
    .col {
      display: inline-block;
      padding-left: 10px;
      height: 28px;
      line-height: 28px;
      text-align: left;
    }
    .col-1 {
      width: 10px;
      background: url("./assets/playlist.png") no-repeat -174px 8px;
    }
    .col-2 {
      width: 256px;
    }
    .col-3,
    .col-4 {
      width: 80px;
      color: #fff;
    }
    .col-5 {
      width: 13px;
      height: 16px;
      background: url("./assets/playlist.png") no-repeat -40px 0px;
      &:hover {
        background-position: -40px -20px;
      }
    }
  }
}
.list-lyric {
  position: absolute;
  right: 0;
  top: 0;
  width: 429px;
  height: 260px;
  overflow-y: scroll;
  text-align: center;
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-track-piece {
    border-radius: 4px;
    background-color: #000;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #4a4949;
    border-radius: 4px;
  }
  p {
    display: inline-block;
    height: 32px;
    width: 100%;
    color: #989898;
    transition: all 0.6s;
  }
  .curLy {
    font-size: 14px;
    color: #fff;
  }
}
</style>
